<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>slot</title>
  <style>
    li{
      list-style: none;
      float: left;
      width: 33%;
      height: 150px;
      border: 1px solid black ;
      background-color: aqua;
    }
  </style>
</head>
<body>
<div id="app"></div>

<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">

  /* slot留坑，外部填入html内容*/
  var MyLi = {
    template:`
      <li>
        <slot></slot>
      </li>
    `
  }
  Vue.component('my-li',MyLi);
  /**
   * 总结：slot其实就是父组件传递的DOM结构
   * vue提供的内置组件 <slot></slot>
   * <my-li>
   *     <button>111</button>
   * </my-li>
   * */

  /* 入口组件： 实现九宫格 */
  var App = {
    template:`
        <div>
          <ul>
            <my-li>
              <button>111</button>
            </my-li>
            <my-li>
              <h1>222</h1>
            </my-li>
            <my-li>3</my-li>
            <my-li>4</my-li>
            <my-li>5</my-li>
            <my-li>6</my-li>
            <my-li>7</my-li>
            <my-li>
              <h1>888</h1>
            </my-li>
            <my-li>
              <button>999</button>
            </my-li>
          </ul>
        </div>
      `
  }

  new Vue({
    el:'#app',
    components:{
      app:App,
    },
    template:'<app/>'

  });

 /* var data1 = [1,3,5,79, 12, 15, 18];
  var data2 = [2, 8, 11, 16, 19];

  var arr = [];
  var newArr = arr.concat(data1, data2).sort(function(a, b) {
    return a-b ;
  });
  console.log(newArr);*/
</script>
</body>
</html>
